<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时交易量统计</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 25px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeef2;
        }
        .title {
            font-size: 24px;
            font-weight: 600;
            color: #2c3e50;
        }
        .time-indicator {
            font-size: 16px;
            color: #7f8c8d;
            background: #f8f9fa;
            padding: 8px 16px;
            border-radius: 18px;
            display: flex;
            align-items: center;
        }
        .time-indicator::before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #52c41a;
            margin-right: 8px;
        }
        .chart-container {
            height: 480px;
            margin-bottom: 20px;
        }
        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #7f8c8d;
        }
        .update-info {
            display: flex;
            align-items: center;
        }
        .update-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #1890ff;
            margin-right: 8px;
            animation: pulse 1.5s infinite;
        }
        .legend {
            display: flex;
            gap: 20px;
        }
        .legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .legend-color {
            width: 15px;
            height: 4px;
            border-radius: 2px;
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.4; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">实时交易量统计</div>
            <div class="time-indicator" id="currentTime">当前时间: --:--:--</div>
        </div>
        
        <div id="chart" class="chart-container"></div>
        
        <div class="footer">
            <div class="update-info">
                <div class="update-indicator"></div>
                <span>数据每30秒自动更新</span>
            </div>
            <div class="legend">
                <div class="legend-item">
                    <div class="legend-color" style="background-color: #5470c6;"></div>
                    <span>历史交易量（已固定）</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color: #91cc75;"></div>
                    <span>当前时段交易量（实时更新）</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化ECharts实例
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
        
        // 获取当前时间并格式化
        function getCurrentTime() {
            const now = new Date();
            return now.toLocaleTimeString();
        }
        
        // 更新当前时间显示
        function updateCurrentTime() {
            document.getElementById('currentTime').textContent = `当前时间: ${getCurrentTime()}`;
        }
        
        // 初始化时间显示
        updateCurrentTime();
        setInterval(updateCurrentTime, 1000);
        
        // 生成模拟数据（实际应用中应从数据库获取）
        function generateData() {
            const now = new Date();
            const currentHour = now.getHours();
            const currentSegment = Math.floor(currentHour / 3); // 当前3小时分段
            
            // 生成过去24小时的数据（8个3小时分段）
            const segments = 8;
            const data = [];
            
            for (let i = 0; i < segments; i++) {
                const segmentStart = i * 3;
                const segmentEnd = segmentStart + 3;
                const segmentLabel = `${segmentStart.toString().padStart(2, '0')}:00 - ${segmentEnd.toString().padStart(2, '0')}:00`;
                
                // 生成每个分段内的数据点（每30分钟一个点）
                const segmentData = [];
                const isCurrentSegment = i === currentSegment;
                
                for (let j = 0; j < 6; j++) {
                    const minutes = j * 30;
                    const timeLabel = `${segmentStart.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
                    
                    // 当前分段的数据会随时间变化
                    if (isCurrentSegment) {
                        // 当前时段，生成随机数据（模拟实时变化）
                        const value = Math.floor(Math.random() * 1000) + 500;
                        segmentData.push([timeLabel, value]);
                    } else {
                        // 非当前时段，数据固定
                        const baseValue = 700 + Math.floor(Math.random() * 600);
                        segmentData.push([timeLabel, baseValue]);
                    }
                }
                
                data.push({
                    name: segmentLabel,
                    data: segmentData,
                    isCurrent: isCurrentSegment
                });
            }
            
            return data;
        }
        
        // 更新图表
        function updateChart() {
            const data = generateData();
            
            // 准备ECharts配置
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    name: '时间',
                    axisLine: {
                        lineStyle: {
                            color: '#8392A5'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    },
                    data: data.flatMap(segment => 
                        segment.data.map(point => `${segment.name}\n${point[0]}`)
                    )
                },
                yAxis: {
                    type: 'value',
                    name: '交易量',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#8392A5'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#E4E7ED'
                        }
                    }
                },
                series: [{
                    name: '交易量',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 3
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        color: function(params) {
                            // 根据是否为当前时段设置不同颜色
                            const segmentIndex = Math.floor(params.dataIndex / 6);
                            return data[segmentIndex].isCurrent ? '#91cc75' : '#5470c6';
                        }
                    },
                    data: data.flatMap(segment => segment.data.map(point => point[1]))
                }],
                dataZoom: [{
                    type: 'inside',
                    start: 70,
                    end: 100
                }]
            };
            
            // 应用配置
            myChart.setOption(option);
        }
        
        // 初始化图表
        updateChart();
        
        // 每30秒更新一次数据
        setInterval(updateChart, 2000);
        
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>